<template>
  <div>
    <div class="nav bg-theme color-f text-l" >
        <div style="display:flex;">
        <i class="iconfont icon-fanhui font19 pl08 iback" @click="goBack"></i>
        <span class="font19 ml16">党建视频详情</span>
        </div>
    </div> 

    <div class="pageview">
        
        <div v-if="Object.keys(detailData).length > 0" class="text-c">
            <div>
                <div id="title" v-html="detailData.title" />
                <div id="subtitle" >
                    发布员：<span id="creator">{{detailData.applyUserName}}</span>
                    更新时间：<span id="createdTime">{{detailData.modifiedTime}}</span> 
                    阅读：<span id="readCount">{{detailData.playNum}}</span>
                </div>
            </div>
            <hr/>
            <videoView v-show="isVideo" :videoUrl="getVideoPath(detailData.videoFiles[0].anonymousFilePath)"/>
            <div id="html" v-html="formatHtml(detailData.content)"/>
            <div v-show="!isVideo"><!-- 附件列表 -->
                <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
                    <div class="blue_item" />
                    <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">附件列表</span>
                </div>
                <div v-for="fileitem in detailData.videoFiles" :key="fileitem.id" style="margin-left:20px">
                    <div readonly class="font14 fileLink" style="color:#0F85CF">
                        <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
                    </div>
                </div>
            </div>
            <commentListView :commentList="commentList" id="comment-list-detail"/>
            <div id="comment" @click="showChatPopView">
                    <span class="font14" style="color:#AAAAAA">客官,留下您的神评吧</span>
            </div>
        </div>
        <div v-else class="text-c">
            <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')"
                alt="获取数据失败" style="margin: 120px 50px 0" @click="getDatas()" />
            <div class="color-b font14" style="margin: 20px 0 0 15px"> 获取数据失败!</div>
        </div>
        <van-popup :overlay-style="{background:'rgba(255,255,255,0)'}" v-model="showChatPop"  position="bottom" 
        :style="{ height: '112px',padding:'10px' }" > 
              <div style="display:flex">
                 <van-field autosize rows="2" type="textarea" v-model="chatinfos" placeholder="客官,留下您的神评吧" style="flex:1"
                   class="chatInput" >
                 </van-field>  
              <div style="display:flex;flex-direction:column;">
                <div style="display:flex;justify-content:center ">
                  <van-icon name="arrow-down" size="20px"  @click="showChatPop=false"/>
                </div>
        
              <van-button type="primary" size="small" color="#F06F3F" style="margin:5px" 
                @click="commentSubmit(chatinfos)">提交</van-button>
              </div>
              </div>
            </van-popup>
    </div>
    
  </div>
</template>

<script type="text/javascript">
import { openFileUrl } from '@/store/openFile'
import commentListView from '@/components/commentList'
import videoView from '@/components/player'
import {mapGetters} from 'vuex'
import { getDetail,getCommentList,addPlayCount,commentApi} from "@/api/appApi";
import { Notify } from 'vant';
  export default {
    data(){
        return{
            isVideo:this.$route.query.isVideo == "0",
            detailData:{},
            commentList:[],
            chatinfos:'',
            showChatPop:false
        }
    },
    computed:{
        ...mapGetters(['user']),
    },

    components:{
        commentListView,
        videoView,
    },
    //生命周期--挂载完成
    created() {
        this.getDatas();
    },
    //方法调用
    methods: {
        getVideoPath(url){
            return '/' + url.split('/').slice(3).join('/');
        },
        openFileUrlfun(value) {
            this.$router.push(
                {
                name: 'fileview',
                query: {
                    openFileUrl: openFileUrl(value)
                }
                }
            );
        },
        formatHtml(text) {
            const matchList = {
                "&lt;": "<",
                "&gt;": ">",
                "&amp;": "&",
                "&#34;": '"',
                "&quot;": '"',
                "&#39;": "'",
            };
            let regStr = "(" + Object.keys(matchList).toString() + ")";
            // ↑ ------------【*提取匹配列表key值*】.【组数转字符串】
            regStr = regStr.replace(/,/g, ")|(");
            // ↑ 通过匹配将其更新为正则的字符串类型
            const regExp = new RegExp(regStr, "g");
            // ↑ ------- 字符串 转 正则 方法
            return text.replace(regExp, (match) => matchList[match]);
            // ↑ ------ 替换方法 (正则, 当前key => 返回当前被匹配的key值)
        },
        goBack(){
            this.$router.back(-1) //返回上一页
        }, 
        getDatas(){
            getDetail(this.$route.query.id,this.user.userName)
            .then((result) => {
                this.detailData=result.data.data;
                this.getCommentDatas();
                this.addPlayDatas();
            })
        },
        getCommentDatas(){
            getCommentList(this.$route.query.id,this.user.userName)
            .then((result) => {
                this.commentList=result.data.data;
            })
        },
        addPlayDatas(){
            addPlayCount(this.$route.query.id,this.user.userName)
            .then((result) => {})
        },
        commentSubmit(commentText){
            commentApi(this.$route.query.id,commentText,this.user.userName)
            .then((result) => {
                if(result.responseid==1){//成功
                    this.chatinfos='';
                    this.showChatPop=false;
                    this.commentList=this.commentList.concat(result.data.data);
                }else{
                    Notify({ type: 'warning', message: result.message });
                }
            })
        },
        showChatPopView(){
            this.showChatPop=true;
        }
    },
    
  }
</script>
<style  scoped>
/* @import url();*/
  .vh100{
    width: 100%;
  }
  .pageview{
      height:100%;
      padding-top: 50px;
      margin-bottom: 60px;
      font-size: 12px;
  }
  #title{
      color:#333333;
      padding: 5px;
      font-weight: bold;
      font-size: 18px;
  }
  #comment-list-detail{
      padding-bottom: 55px;
  }
  #subtitle{
      color:#666666;
      padding: 5px;
      font-size: 12px;
  }
  #comment{
    display:flex;
    align-items:center;
    background-color:#F7F7F7;
    /* margin:10px 0.35rem; */
    border-radius:10px;
    padding:10px;
    position:fixed;
    bottom:0;
    width:calc(100% - 0rem);
  }
  
</style>